<template>
  <div id="recom" style="height: 100vh">
    <Sidebar></Sidebar>
    <div class="kunimage"></div>
    <SearchInput></SearchInput>
    <!-- 推荐岗位 -->
    <div class="work">
      <div v-for="(jobInfo, index) in currentTableData" :key="index">
        <button class="job" @click="jobdescribe(jobInfo)">
          <p
            class="p1"
            style="
              margin-left: 5%;
              margin-top: 20px;
              font-family: 宋体;
              font-size: 20px;
            "
          >
            <b>{{ jobInfo.pname }}</b> [{{ jobInfo.paddress }}]
          </p>
          <p
            class="p1"
            style="
              margin-left: 750px;
              margin-top: 50px;
              font-family: 宋体;
              font-size: 25px;
            "
          >
            <b>{{ jobInfo.cname }}</b>
          </p>
          <p
            class="p1"
            style="
              margin-left: 5%;
              margin-top: 75px;
              font-family: 宋体;
              font-size: 18px;
            "
          >
            <b style="color: rgb(0, 148, 239)">薪资 : {{ jobInfo.salary }} </b>
          </p>
          <p
            class="p1"
            style="
              margin-left: 15%;
              margin-top: 75px;
              font-family: 宋体;
              font-size: 18px;
            "
          >
            <b style="color: rgb(254, 69, 69)">热度 : {{ jobInfo.hot }}</b>
          </p>
        </button>
      </div>
    </div>
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
      style="
        margin-top: 50px;
        width: 400px;
        margin-left: 20%;
        height: 150px;
        font-size: xx-large;
      "
    >
    </el-pagination>
  </div>
</template>
    
  
  
    <script>
import axios from "axios";
import Sidebar from "@/components/SeekerSidebar.vue";
import SearchInput from "@/components/SearchInput.vue";
export default {
  components: {
    Sidebar,
    SearchInput,
  },
  data() {
    return {
      SeekerUserData: JSON.parse(sessionStorage.getItem("SeekerUser")),
      tableData: [],
      currentTableData: [], // 当前页显示的数据
      total: 0, // 总数据条数
      pageSize: 3, // 每页条数
      currentPage: 1, // 当前页码
    };
  },
  created() {
    this.gethotjob();
  },
  methods: {
    gethotjob() {
      axios
        .post("http://localhost:8080/hqdx/seeker/findComPositionByHot")
        .then((response) => {
          this.tableData = response.data.data.items;
          this.total = this.tableData.length; // 总数据条数
          this.updateCurrentTableData(); // 更新当前页的数据
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 更新当前页的数据
    updateCurrentTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentTableData = this.tableData.slice(start, end);
    },
    //分页跳转
    handlePageChange(page) {
      this.currentPage = page;
      this.updateCurrentTableData();
    },
    //路由跳转，职位详细
    jobdescribe(jobInfo) {
      this.$router.push({
        name: "Posdescribe",
        params: { ElemSeekerPos: jobInfo },
      });
    },
  },
};
</script>
    <style scoped>
#recom {
  background: linear-gradient(to top, #ffffff, #e0f7fa);
}
.kunimage {
  border: none;
  height: 138px;
  background-image: url("/public/image/求职者首页图片1.jpeg");
  background-size: 100% 100%;
}
.work {
  margin-top: 5%;
}
.job {
  display: flex;
  margin-left: 5%;
  margin-top: 50px;
  width: 55%;
  height: 150px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 15px;
}

.job:hover {
  color: rgb(122, 226, 205);
}
.p1 {
  position: absolute;
  margin: 0;
}
</style>